<template>
  <div class="energy-table">
    <div class="table-title">
      <h2>临安区公共机构能源消耗调查明细表</h2>
      <span>({{energyData.Year}}年单位基本情况)</span>
    </div>
    <div class="table-content">
      <div class="table-select">
        <div class="table-selectItem">
          <label>填报单位：</label>
          <select style="max-width: 280px;" v-model="energyData.DepartmentName" @change="doSearch()">
            <option :key="i" v-for="(item,i) in departments" :value="item">{{item}}</option>
          </select>
        </div>
        <div class="table-selectItem">
          <label>年份：</label>
          <select style="width: 80px;" v-model="energyData.Year" @change="doSearch()">
            <option :key="n" v-for="n in selectYear" :value="n">{{n}}</option>
          </select>
        </div>
        <div class="table-selectItem">
          <label>办公地址：</label>
          <input type="text" v-model="energyData.OfficeAddress">
        </div>
      </div>
      <table width="100%" border="1" cellpadding="10">
        <tr>
          <td rowspan="12" align="center" valign="middle" width="40px;">
            <strong>从业<br/><br/>人员<br/><br/>公务<br/><br/>车辆<br/><br/>办公<br/><br/>建筑<br/><br/>情况</strong>
          </td>
          <td>年用能人数</td>
          <td><input type="text" v-model="energyData.PeopleTotal">
            <i>*</i>
          </td>
          <td>年末车辆总数</td>
          <td><input type="text" v-model="energyData.CarTotal">
            <i>*</i>
          </td>
        </tr>
        <tr>
          <td style="padding-left:15px;">其中：在编人数</td>
          <td><input type="text" v-model="energyData.PeopleIn">
            <i>*</i>
          </td>
          <td style="padding-left:15px;">其中：汽油车数量</td>
          <td><input type="text" v-model="energyData.CarGasoline">
            <i>*</i>
          </td>
        </tr>
        <tr>
          <td style="padding-left:58px;">非在编人数</td>
          <td><input type="text" v-model="energyData.PeopleOut">
            <i>*</i>
          </td>
          <td style="padding-left:58px;">柴油车数量</td>
          <td><input type="text" v-model="energyData.CarDiesel">
            <i>*</i>
          </td>
        </tr>
        <tr>
          <td>地上办公室建筑面积(m<sup>2</sup>)</td>
          <td><input type="text" v-model="energyData.AreaUp">
            <i>*</i>
          </td>
          <td style="padding-left:58px;">新能源汽车数量</td>
          <td><input type="text" v-model="energyData.CarNewEnergy">
            <i>*</i>
          </td>
        </tr>
        <tr>
          <td>地下建筑用途</td>
          <td><input type="text" v-model="energyData.AreaUse"></td>
          <td>是否有用电分项(户)计量</td>
          <td>
            <label for="1">是</label>
            <input type="radio" value="true" v-model="energyData.HasElectricity">
            <label for="0">否</label>
            <input type="radio" value="false" v-model="energyData.HasElectricity">
          </td>
        </tr>
        <tr>
          <td>地下建筑面积(m<sup>2</sup>)</td>
          <td><input type="text" v-model="energyData.AreaDown"></td>
          <td>是否有用水分项(户)计量</td>
          <td>
            <label>是</label>
            <input type="radio" value="true" v-model="energyData.HasWater">
            <label>否</label>
            <input type="radio" value="false" v-model="energyData.HasWater">
          </td>
        </tr>
        <tr>
          <td>绿地面积(m<sup>2</sup>)</td>
          <td><input type="text" v-model="energyData.AreaGreen"></td>
          <td>外窗类型</td>
          <td>
            <input type="text" v-model="energyData.OutsideType">
          </td>
        </tr>
        <tr>
          <td>办公室数量</td>
          <td><input type="text" v-model="energyData.OfficeNum"></td>
          <td>窗框类型</td>
          <td>
            <input type="text" v-model="energyData.FrameWindowType">
          </td>
        </tr>
        <tr>
          <td>总配电容量</td>
          <td><input type="text" v-model="energyData.OfficeCapacitance"></td>
          <td>玻璃类型</td>
          <td>
            <input type="text" v-model="energyData.GlassType">
          </td>
        </tr>
        <tr>
          <td>电表总表号码</td>
          <td><input type="text" v-model="energyData.OfficeElectNum">
            <i>*</i>
          </td>
          <td>是否利用太阳能(或空气能)</td>
          <td>
            <label>是</label>
            <input type="radio" value="true" v-model="energyData.HasSolar">
            <label>否</label>
            <input type="radio" value="false" v-model="energyData.HasSolar">
          </td>
        </tr>
        <tr>
          <td>水表总表号码</td>
          <td><input type="text" v-model="energyData.OfficeWaterNum">
            <i>*</i>
          </td>
          <td>有无食堂</td>
          <td>
            <label>是</label>
            <input type="radio" value="true" v-model="energyData.HasFood">
            <label>否</label>
            <input type="radio" value="false" v-model="energyData.HasFood">
          </td>
        </tr>
        <tr>
          <td>物业管理方式</td>
          <td><input type="text" v-model="energyData.OfficeManageWay"></td>
          <td>有无浴室</td>
          <td>
            <label>是</label>
            <input type="radio" value="true" v-model="energyData.HasBathroom">
            <label>否</label>
            <input type="radio" value="false" v-model="energyData.HasBathroom">
          </td>
        </tr>
        <tr>
          <td rowspan="13" align="center" valign="middle">
            <strong>用能<br/><br/>设备<br/><br/>情况</strong>
          </td>
          <td align="center" valign="middle">设备类型</td>
          <td align="center" valign="middle">设备名称</td>
          <td align="center" valign="middle">台数</td>
          <td align="center" valign="middle">总功率(Kw)</td>
        </tr>
        <tr>
          <td rowspan="4" align="center" valign="middle">制冷(热)设备</td>
          <td valign="middle">办公空调</td>
          <td valign="middle"><input type="text" v-model="energyData.OfficeAirNum"></td>
          <td valign="middle"><input type="text" v-model="energyData.OfficeAirPower"></td>
        </tr>
        <tr>
          <td valign="middle">中央空调</td>
          <td valign="middle"><input type="text" v-model="energyData.CentralAirNum"></td>
          <td valign="middle"><input type="text" v-model="energyData.CentralAirPower"></td>
        </tr>
        <tr>
          <td valign="middle">冰箱</td>
          <td valign="middle"><input type="text" v-model="energyData.FridgeNum"></td>
          <td valign="middle"><input type="text" v-model="energyData.FridgePower"></td>
        </tr>
        <tr>
          <td valign="middle">锅炉</td>
          <td valign="middle"><input type="text" v-model="energyData.BoilerNum"></td>
          <td valign="middle"><input type="text" v-model="energyData.BoilerPower"></td>
        </tr>
        <tr>
          <td rowspan="9" align="center" valign="middle">办公室设备</td>
          <td valign="middle">电梯</td>
          <td valign="middle"><input type="text" v-model="energyData.ElevatorNum"></td>
          <td valign="middle"><input type="text" v-model="energyData.ElevatorPower"></td>
        </tr>
        <tr>
          <td valign="middle">电脑</td>
          <td valign="middle"><input type="text" v-model="energyData.ComputerNum"></td>
          <td valign="middle"><input type="text" v-model="energyData.ComputerPower"></td>
        </tr>
        <tr>
          <td valign="middle">打印机</td>
          <td valign="middle"><input type="text" v-model="energyData.PrinterNum"></td>
          <td valign="middle"><input type="text" v-model="energyData.PrinterPower"></td>
        </tr>
        <tr>
          <td valign="middle">复印机</td>
          <td valign="middle"><input type="text" v-model="energyData.PhotocopierNum"></td>
          <td valign="middle"><input type="text" v-model="energyData.PhotocopierPower"></td>
        </tr>
        <tr>
          <td valign="middle">传真机</td>
          <td valign="middle"><input type="text" v-model="energyData.FaxNum"></td>
          <td valign="middle"><input type="text" v-model="energyData.FaxPower"></td>
        </tr>
        <tr>
          <td valign="middle">交互机</td>
          <td valign="middle"><input type="text" v-model="energyData.MachineNum"></td>
          <td valign="middle"><input type="text" v-model="energyData.MachinePower"></td>
        </tr>
        <tr>
          <td valign="middle">服务器</td>
          <td valign="middle"><input type="text" v-model="energyData.ServerNum"></td>
          <td valign="middle"><input type="text" v-model="energyData.ServerPower"></td>
        </tr>
        <tr>
          <td valign="middle">稳压电源</td>
          <td valign="middle"><input type="text" v-model="energyData.SupplyPowerNum"></td>
          <td valign="middle"><input type="text" v-model="energyData.SupplyPowerPower"></td>
        </tr>
      </table>
      <div class="table-button">
        <input type="button" value="保存" @click="submitReport" v-if="energyData.State!=1">
        <input type="button" value="打印" @click="prints()">
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selectYear: [],
        departments: [],
        departName: '',
        year: '',
        energyData: {
          PeopleTotal: 0,
          PeopleIn: 0,
          PeopleOut: 0,
          AreaUp: 0,
          AreaDown: 0,
          AreaGreen: 0,
          AreaUse: "",
          CarTotal: 0,
          CarGasoline: 0,
          CarDiesel: 0,
          CarNewEnergy: 0,
          HasElectricity: false,
          HasWater: false,
          HasSolar: false,
          HasFood: false,
          HasBathroom: false,
          OutsideType: "",
          FrameWindowType: "",
          GlassType: "",
          OfficeNum: 0,
          OfficeCapacitance: 0,
          OfficeElectNum: 0,
          OfficeWaterNum: 0,
          OfficeManageWay: "",
          OfficeAirNum: 0,
          OfficeAirPower: 0,
          CentralAirNum: 0,
          CentralAirPower: 0,
          FridgeNum: 0,
          FridgePower: 0,
          BoilerNum: 0,
          BoilerPower: 0,
          ElevatorNum: 0,
          ElevatorPower: 0,
          ComputerPower: 0,
          ComputerNum: 0,
          PrinterPower: 0,
          PrinterNum: 0,
          PhotocopierPower: 0,
          PhotocopierNum: 0,
          FaxPower: 0,
          FaxNum: 0,
          MachinePower: 0,
          MachineNum: 0,
          ServerPower: 0,
          ServerNum: 0,
          SupplyPowerPower: 0,
          SupplyPowerNum: 0,
          DepartmentName: "",
          Year: new Date().getFullYear(),
          OfficeAddress: "",
          State: 0
        }
      }
    },
    methods: {
      async submitReport() {
        var energyData = this.energyData;
        delete energyData.Id
        if (energyData.PeopleTotal !== '' && energyData.PeopleIn !== '' && energyData.PeopleOut !== '' && energyData.CarTotal !== '' && energyData.CarGasoline !== '' && energyData.CarDiesel !== '' && energyData.CarNewEnergy !== '' && energyData.AreaUp !== '' && energyData.OfficeElectNum !== '' && energyData.OfficeWaterNum !== '') {
          console.log(this.energyData);
          try {
            const result = await this.$post("/api/DepartmentEnergy", energyData)
            console.log(result)
            alert('操作成功！')
          }
          catch (error) {
            alert(error.message)
          }
        } else {
          alert("请将带 * 的输入框填写完整")
        }
      },
      async getDepartments() {
        const result = await this.$get("/api/user/departments");
        this.departments = result
        this.energyData.DepartmentName = result[0]
        this.doSearch()
      },
      async doSearch() {
        this.year = this.energyData.Year
        this.departName = this.energyData.DepartmentName
        const result = await this.$get("/api/DepartmentEnergy/" + this.energyData.Year, { departmentName: this.energyData.DepartmentName });
        if (result) {
          console.log(result)
          this.energyData = result
        } else {
          this.energyData = {
            PeopleTotal: 0,
            PeopleIn: 0,
            PeopleOut: 0,
            AreaUp: 0,
            AreaDown: 0,
            AreaGreen: 0,
            AreaUse: "",
            CarTotal: 0,
            CarGasoline: 0,
            CarDiesel: 0,
            CarNewEnergy: 0,
            HasElectricity: false,
            HasWater: false,
            HasSolar: false,
            HasFood: false,
            HasBathroom: false,
            OutsideType: "",
            FrameWindowType: "",
            GlassType: "",
            OfficeNum: 0,
            OfficeCapacitance: 0,
            OfficeElectNum: 0,
            OfficeWaterNum: 0,
            OfficeManageWay: "",
            OfficeAirNum: 0,
            OfficeAirPower: 0,
            CentralAirNum: 0,
            CentralAirPower: 0,
            FridgeNum: 0,
            FridgePower: 0,
            BoilerNum: 0,
            BoilerPower: 0,
            ElevatorNum: 0,
            ElevatorPower: 0,
            ComputerPower: 0,
            ComputerNum: 0,
            PrinterPower: 0,
            PrinterNum: 0,
            PhotocopierPower: 0,
            PhotocopierNum: 0,
            FaxPower: 0,
            FaxNum: 0,
            MachinePower: 0,
            MachineNum: 0,
            ServerPower: 0,
            ServerNum: 0,
            SupplyPowerPower: 0,
            SupplyPowerNum: 0,
            DepartmentName: "",
            Year: new Date().getFullYear(),
            OfficeAddress: "",
            State: 0
          }
          this.energyData.DepartmentName = this.departName
          this.energyData.Year = this.year
        }
      },
      prints() {
        if (window.print != null) {
          window.print();
        }
        else {
          alert('您没有安装打印机，请安装后继续!')
        }
      }
    },
    created() {
      var num = new Date().getFullYear();
      for (var i = num - 13; i < num + 1; i++) {
        this.selectYear.unshift(i);
      }
      this.getDepartments()
    }
  }

</script>

<style lang="scss" scoped>
  .energy-table {
    padding: 25px 0;
  }

  .table-title {
    height: auto;
    margin-bottom: 25px;
    h2 {
      text-align: center;
      margin-bottom: 5px;
      font-size: 16px;
    }
    span {
      width: 100%;
      display: inline-block;
      text-align: center;
      font-weight: bold;
    }
  }

  .table-content {
    height: auto;
    .table-select {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      margin-bottom: 25px;
      .table-selectItem {
        input {
          border: none;
          outline: none;
          border-bottom: 1px solid rgb(169, 169, 169);
          width: 200px;
        }
      }
    }
    table {
      td {
        padding: 5px;
        input[type=text] {
          border-radius: 5px;
          border: 1px solid rgb(169, 169, 169);
          outline: none;
          padding-left: 5px;
          height: 24px;
          width: 220px;
        }
        i {
          color: red;
          font-size: 16px;
        }
      }
    }
    .table-button {
      margin-top: 20px;
      display: flex;
      flex-direction: row;
      justify-content: center;
      input {
        width: 60px;
        margin-left: 25px;
      }
    }
  }
</style>